<template>
  <!-- <div class="main">
    <div class="title">{{data.title}}</div>
    <div class="num">{{data.num}}</div> -->
  <div class="chart" ref="chart"></div>
  <!-- <div class="lable">{{data.title2}}<span style="">{{data.yearOnYear}}</span>  全国位次<span style="color: #01FE01;
      font-family: HarmonyOS Sans SC;
      font-weight: bold;
      font-size: 14px;
      line-height: normal;
      letter-spacing: 0px;
      text-align: left;
    ">{{data.pop}}</span></div>
  </div>  -->
</template>
 
 <script>
import { getPie3D, getParametricEquation } from "@/api/chart.js"; //工具类js，页面路径自己修改

export default {
  name: "chart",
  props: {
    data: {
      num: 59,
      yearOnYear: 65.1,
      pop: 5,
      color: "#0ba4c1",
      color2: "#d1485d",
      title: "国家局表彰重大案件数量(起)",
      title2: "占全国比重",
    },
  },
  data() {
    return {
      optionData: [
        {
          value: 176,
          itemStyle: {
            color: "",
          },
          label: {
            normal: {
              show: false,
            },
          },
        },
        {
          value: 288,
          itemStyle: {
            color: "",
          },
          label: {
            normal: {
              show: false,
            },
          },
        },
      ],
      statusChart: null,
      option: {},
    };
  },
  created() {
    //  this.setLabel()
  },
  mounted() {
    this.initChart();

    //根据窗口变化自动调节图表大小
    const that = this;
    window.onresize = function () {
      that.changeSize();
    };
  },
  watch: {
    "data.yearOnYear": {
      handler() {
        this.initChart();
      },
    },
  },
  methods: {
    // 初始化label样式
    setLabel() {
      // var color=[this.data.color, this.data.color2] ;
      // // if(this.data.yearOnYear>=50)
      // //   color = [this.data.color, this.data.color2];
      // //   console.log(color,"color")
      //  this.optionData.forEach((item, index) => {
      //    item.itemStyle = {
      //      color: color[index]
      //    }
      //    item.label = {
      //      normal: {
      //        show: false,
      //      }
      //    }
      //  })
    },
    // 图表初始化
    initChart() {
      this.statusChart = this.$echarts.init(this.$refs.chart);
      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细

      this.optionData[0].value = 100 - this.data.yearOnYear;
      this.optionData[1].value = this.data.yearOnYear;
      this.optionData[0].itemStyle.color = this.data.color;
      this.optionData[1].itemStyle.color = this.data.color2;

      this.option = getPie3D(this.optionData, 0, 280, 25, 20, 0.3);
      this.statusChart.setOption(this.option);
      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
      this.option.series.push({
        name: "电梯状态", //自己根据场景修改
        backgroundColor: "transparent",
        type: "pie",
        label: {
          opacity: 1,
          fontSize: 13,
          lineHeight: 20,
        },
        startAngle: -90, // 起始角度，支持范围[0, 360]。
        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
        radius: ["20%", "50%"],
        center: ["50%", "50%"],
        data: this.optionData,
        itemStyle: {
          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
        },
      });
      this.statusChart.setOption(this.option, true);
    },

    changeSize() {
      this.statusChart.resize();
    },
  },
};
</script>
 <style lang="scss" scoped>
.main {
  display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        text-align: center;
        width: 224px;
        height: 150px;
        background: url(../../assets/qjzl-new/new/djdsbg.png);
        background-size: 100% 100%;
    .title{
     
      // font-family: HarmonyOS Sans SC;
      font-weight: bold;
      font-size: 14px;
      line-height: normal;
      letter-spacing: 0px;
      text-align: center;

    width: 152px;
  }
  .num {
    margin-top: -10px;
    color: #42c7de;
    font-family: Impact;
    font-weight: regular;
    font-size: 18px;
    line-height: normal;
    letter-spacing: 0px;
    text-align: right;
  }
  .chart {
    margin-top: -40px;
    width: 100px;
    height: 100px;
  }
  .lable {
    margin-top: -30px;
    // font-family: HarmonyOS Sans SC;
    font-weight: regular;
    font-size: 12px;
    line-height: normal;
    letter-spacing: 0px;
    text-align: left;
  }
}
</style>